<template>
  <div class="comment-list">
    <van-cell title="全部评论"></van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <comment-list 
      v-for="(comment,index) in list"
      :comment="comment"
      :key="index"
      />
    </van-list>
  </div>
</template>
<script>
import {getComments} from '@/api/comment'
import CommentItem from './comment-item'
export default {
  name: "CommnetList",
  components:{
      CommentItem
  },
  props:{
    source:{
        type:[Number,String,Object],
        required:true
    },
    list:{
        type:Array,
        default:()=>[]
        // default:function(){
        //   return []
        // }
    }
  },
   data() {
    return {
      // list: [],
      loading: false,
      finished: false,
      offset:null,//获取下一页
      limit:10//每页大小
    }
  },
  methods: {
    async onLoad () {
    //  1.请求获取数据
    const {data} =await getComments({
        type:'a',
        source:this.source,
        offset:this.offset,
        limit:this.limit
    })
    console.log(data);
    //  2.把数据放到列表中
    const{results}=data.data
    this.list.push(...results)
    //  3.将本次的loading关闭
    this.loading=false
    //  4.判断是否还有数据
    if(results.length){
        this.offset=data.data.last_id
    }else{
         //  如果有 更新获取下一页数据的页码
    //  如果没有 则将finished设置为true 不在触发加载更多了
        this.finished=true
    }
    }
  
  }
}
</script>